<template>
  <div class="landing-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="container">
        <div class="nav-brand">
          <h1>洗护到家</h1>
          <span class="tagline">专业洗护服务平台</span>
        </div>
        <nav class="nav-menu">
          <el-button type="primary" @click="goToLogin">登录</el-button>
          <el-button @click="goToRegister">注册</el-button>
        </nav>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 英雄区域 -->
      <section class="hero-section">
        <div class="container">
          <div class="hero-content">
            <h2>专业洗护服务，上门取送</h2>
            <p>让您的衣物焕然一新，享受便捷的洗护体验</p>
            <div class="hero-actions">
              <el-button type="primary" size="large" @click="startService">
                立即体验
              </el-button>
              <el-button size="large" @click="learnMore">
                了解更多
              </el-button>
            </div>
          </div>
          <div class="hero-image">
            <div class="hero-placeholder">
              <div class="placeholder-icon">🧺</div>
              <p>专业洗护服务</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 服务特色 -->
      <section class="features-section">
        <div class="container">
          <h3>为什么选择我们</h3>
          <div class="features-grid">
            <div class="feature-card">
              <div class="feature-icon">
                <el-icon><Van /></el-icon>
              </div>
              <h4>上门取送</h4>
              <p>专业师傅上门取送，省时省力，让您足不出户享受洗护服务</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <el-icon><Lock /></el-icon>
              </div>
              <h4>品质保障</h4>
              <p>严格的质量控制体系，确保每一件衣物都得到专业的洗护</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <el-icon><Timer /></el-icon>
              </div>
              <h4>快速便捷</h4>
              <p>24小时内完成洗护，急件服务当日取送，满足您的时间需求</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">
                <el-icon><Star /></el-icon>
              </div>
              <h4>专业团队</h4>
              <p>经验丰富的洗护师傅，专业设备，为您提供五星级服务体验</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 服务类型 -->
      <section class="services-section">
        <div class="container">
          <h3>我们的服务</h3>
          <div class="services-grid">
            <div class="service-card" @click="selectService('衣物洗护')">
              <div class="service-icon">👔</div>
              <h4>衣物洗护</h4>
              <p>日常衣物、正装、羽绒服等专业洗护</p>
            </div>
            <div class="service-card" @click="selectService('鞋类清洗')">
              <div class="service-icon">👟</div>
              <h4>鞋类清洗</h4>
              <p>运动鞋、皮鞋、靴子等专业清洗护理</p>
            </div>
            <div class="service-card" @click="selectService('家纺洗护')">
              <div class="service-icon">🛏️</div>
              <h4>家纺洗护</h4>
              <p>床品、窗帘、地毯等大件家纺洗护</p>
            </div>
            <div class="service-card" @click="selectService('奢侈品护理')">
              <div class="service-icon">👜</div>
              <h4>奢侈品护理</h4>
              <p>名牌包包、皮具等高端物品专业护理</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部 -->
    <footer class="footer">
      <div class="container">
        <p>&copy; 2024 洗护到家. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ElButton, ElIcon, ElMessage } from 'element-plus'
import { Van, Lock, Timer, Star } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login')
}

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register')
}

// 开始服务（需要登录）
const startService = () => {
  ElMessage.info('请先登录以使用我们的服务')
  router.push('/login')
}

// 了解更多
const learnMore = () => {
  // 滚动到服务特色区域
  document.querySelector('.features-section').scrollIntoView({ 
    behavior: 'smooth' 
  })
}

// 选择服务（需要登录）
const selectService = (serviceName) => {
  ElMessage.info(`请先登录以预订${serviceName}服务`)
  router.push({ 
    path: '/login', 
    query: { redirect: '/home', service: serviceName } 
  })
}
</script>

<style scoped>
.landing-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand h1 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.8rem;
  font-weight: bold;
}

.tagline {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-left: 0.5rem;
}

.nav-menu {
  display: flex;
  gap: 1rem;
}

.main-content {
  padding-top: 80px;
}

.hero-section {
  padding: 4rem 0;
  color: white;
}

.hero-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-content h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}

.hero-placeholder {
  width: 100%;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.placeholder-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.hero-placeholder p {
  color: white;
  font-size: 1.2rem;
  margin: 0;
  opacity: 0.9;
}

.features-section,
.services-section {
  padding: 4rem 0;
  background: white;
}

.features-section h3,
.services-section h3 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #2c3e50;
}

.features-grid,
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card,
.service-card {
  text-align: center;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: white;
}

.feature-card:hover,
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-card {
  cursor: pointer;
}

.feature-icon {
  font-size: 3rem;
  color: #667eea;
  margin-bottom: 1rem;
}

.service-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-card h4,
.service-card h4 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.feature-card p,
.service-card p {
  color: #7f8c8d;
  line-height: 1.6;
}

.footer {
  background: #2c3e50;
  color: white;
  padding: 2rem 0;
  text-align: center;
}

@media (max-width: 768px) {
  .hero-section .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-content h2 {
    font-size: 2rem;
  }
  
  .features-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }
}
</style>
